{% extends 'backend_loyout.html' %}
{% block title %}创建文章{% endblock %}
{% block css %}
    <style>
        .add-article-title {
            width: 100%;
            height: 48px;
            list-style: none;
            line-height: 48px;
        }

        .add-article-title li {
            display: inline-block;
            margin-right: 5px;
        }

        .article-form {
            padding: 0px 30px;
        }
        .temp{
            float: right;
            margin-right: 50px;
        }
        #add-temp{
            margin-bottom: 6px;
        }
        .kind-editor {
            width: 100%;
            min-height: 600px;
        }
    </style>
{% endblock %}

{% block content %}
    <ul class="add-article-title">
        <li style="color: #2aabd2">报障管理</li>
        <li><i class="fa fa-arrow-right" style="margin-right: 5px;"></i>接单</li>
    </ul>
    <div class="article-form">
        <form action="{% url 'backend:trouble_kill' id %}" method="post" novalidate>
            {% csrf_token %}

            <div class="form-group">
                <label for="{{ form.title.id_for_label }}">标题 <span>{{ form.title.errors.0 }}</span></label>
                {{ form.title }}
            </div>
            <div class="temp">
                <select id="temp-select">
                    {% for row in temp %}
                        <option v="{{ row.context }}">{{ row.title }}</option>
                    {% endfor %}
                </select>
                <a id="add-temp"class="btn btn-success btn-xs" href="{% url 'backend:trouble_temp_list' %}"><i class="fa fa-plus"></i></a>
            </div>
            <div class="form-group">
                <label>解决方案 <span>{{ form.detail.errors.0 }}</span></label>
                {{ form.solution }}
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="提 交">
                <a class="btn btn-success" href="{% url 'backend:trouble_kill_list' %}" style="float: right;margin-right: 100px;">稍后处理</a>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script charset="utf-8" src="/static/plugins/kingeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/static/plugins/kingeditor/lang/zh-CN.js"></script>
    <script>
        var editor = null;
        KindEditor.ready(function (K) {
            editor = K.create('#solution', {
                resizeType: 1,
                allowImageUpload: true,
                uploadJson: '{% url "backend:article_images" %}',
                filePostName: 'images',
            });
        });
        $('#temp-select').bind('change', function () {
            var index = this.selectedIndex;
            var v = this.value;
            var $ele = this.options[index];
            var content = $ele.getAttribute('v');
            //var index1 = $(this).get(0).selectedIndex;$(this)[0].selectedIndex
            //var v1 = $(this).val();
            //var content1 = $(this).find('option:selected').attr('v');
            //console.log(index,v,index1,v1);
            //console.log(content,content1);
            editor.html(content);
        })
    </script>
{% endblock %}